<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="navigateBack">
          <uni-icons type="back" size="36rpx" color="#ffffff"></uni-icons>
        </view>
        <text class="title">加盟资质指导</text>
        <text class="subtitle">了解加盟所需资质及办理流程</text>
      </view>
    </view>
    
    <!-- 主要内容区 -->
    <view class="main-content">
      <!-- 资质说明 -->
      <view class="intro-card">
        <text class="intro-text">
          为确保加盟机构具备合法经营无人机业务的能力，需提前准备以下资质文件。我们提供详细的资质办理指南，帮助您顺利完成各项准备工作。
        </text>
      </view>
      
      <!-- 资质列表 -->
      <view class="qualification-list">
        <view class="section-title">
          <uni-icons type="list" size="30rpx" color="#36BFFA"></uni-icons>
          <text>必备资质清单</text>
        </view>
        
        <view class="qualification-item" v-for="(item, index) in qualifications" :key="index">
          <view class="qualification-header" @click="toggleQualification(index)">
            <view class="qualification-icon">
              <uni-icons :type="item.icon" size="36rpx" color="#36BFFA"></uni-icons>
            </view>
            <view class="qualification-title">
              <text>{{ item.title }}</text>
              <text class="required" v-if="item.required">必备</text>
            </view>
            <view class="toggle-icon">
              <uni-icons type="right" size="28rpx" color="#999" :class="{ 'rotate': item.expanded }"></uni-icons>
            </view>
          </view>
          
          <view class="qualification-content" v-if="item.expanded">
            <text class="content-desc">{{ item.description }}</text>
            
            <view class="document-list" v-if="item.documents && item.documents.length">
              <text class="doc-title">所需材料：</text>
              <view class="doc-item" v-for="(doc, docIndex) in item.documents" :key="docIndex">
                <uni-icons type="circle" size="16rpx" color="#36BFFA"></uni-icons>
                <text>{{ doc }}</text>
              </view>
            </view>
            
            <view class="tips-box" v-if="item.tips">
              <uni-icons type="info" size="24rpx" color="#FF9800"></uni-icons>
              <text class="tips-text">{{ item.tips }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 办理流程 -->
      <view class="process-section">
        <view class="section-title">
          <uni-icons type="time" size="30rpx" color="#36BFFA"></uni-icons>
          <text>资质办理流程</text>
        </view>
        
        <view class="process-steps">
          <view class="step-item" v-for="(step, index) in processSteps" :key="index">
            <view class="step-number">{{ index + 1 }}</view>
            <view class="step-content">
              <text class="step-title">{{ step.title }}</text>
              <text class="step-desc">{{ step.desc }}</text>
              <view class="step-action" v-if="step.action">
                <button class="action-btn" @click="handleAction(step.action)">{{ step.actionText }}</button>
              </view>
            </view>
            <view class="step-line" v-if="index < processSteps.length - 1"></view>
          </view>
        </view>
      </view>
      
      <!-- 常见问题 -->
      <view class="faq-section">
        <view class="section-title">
          <uni-icons type="question-circle" size="30rpx" color="#36BFFA"></uni-icons>
          <text>常见问题</text>
        </view>
        
        <view class="faq-item" v-for="(faq, index) in faqs" :key="index">
          <view class="faq-question" @click="toggleFaq(index)">
            <text>{{ faq.question }}</text>
            <uni-icons type="down" size="28rpx" color="#999" :class="{ 'rotate': faq.expanded }"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faq.expanded">
            <text>{{ faq.answer }}</text>
          </view>
        </view>
      </view>
      
      <!-- 咨询按钮 -->
      <view class="consult-btn-container">
        <button class="consult-btn" @click="openConsult">
          <uni-icons type="chat" size="28rpx" color="#ffffff" class="btn-icon"></uni-icons>
          <text>有疑问？咨询客服</text>
        </button>
      </view>
    </view>
    
    <!-- 底部 -->
    <view class="footer">
      <text class="contact-info">资质咨询热线：400-123-4567</text>
      <text class="copyright">© 2023 无人机加盟总部 版权所有</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 资质列表数据
      qualifications: [
        {
          title: '企业营业执照',
          icon: 'office',
          required: true,
          expanded: true,
          description: '需包含无人机相关经营范围，如：无人机技术服务、无人机教育培训、航空摄影等。注册资本不低于50万元。',
          documents: [
            '法人身份证原件及复印件',
            '经营场所证明（租赁合同或房产证明）',
            '公司章程',
            '企业名称预先核准通知书'
          ],
          tips: '经营范围需明确包含无人机相关业务，建议在办理时提前与工商部门确认'
        },
        {
          title: '民用无人驾驶航空器经营许可证',
          icon: 'certificate',
          required: true,
          expanded: false,
          description: '由民航管理部门颁发的无人机经营许可，是开展无人机商业运营的法定资质。',
          documents: [
            '营业执照副本',
            '法人及主要负责人身份证明',
            '无人机驾驶员资质证明',
            '经营场所及设施证明',
            '安全管理制度文件'
          ],
          tips: '需向当地民航管理局或其授权单位申请，审批周期通常为20-30个工作日'
        },
        {
          title: '无人机驾驶员资质',
          icon: 'user',
          required: true,
          expanded: false,
          description: '至少拥有1名持有效执照的无人机驾驶员，根据业务范围不同，需相应等级的驾驶员执照。',
          documents: [
            '驾驶员身份证明',
            '培训证明',
            '体检合格证明',
            '考试合格证明'
          ],
          tips: '推荐考取AOPA、ASFC或CAAC认证的无人机驾驶员执照，不同重量和类型的无人机需要不同等级的执照'
        },
        {
          title: '空域使用许可',
          icon: 'map',
          required: false,
          expanded: false,
          description: '根据作业区域不同，可能需要向空军或民航部门申请空域使用许可。',
          documents: [
            '飞行任务申请书',
            '飞行计划',
            '操作人员资质证明',
            '无人机适航证明'
          ],
          tips: '一般在人口稠密区、机场周边等敏感区域飞行需要提前申请空域，具体可咨询当地空管部门'
        },
        {
          title: '税务登记证',
          icon: 'calculator',
          required: true,
          expanded: false,
          description: '完成税务登记，依法缴纳各项税费。',
          documents: [
            '营业执照副本',
            '法人身份证',
            '经营场所证明'
          ]
        }
      ],
      
      // 办理流程
      processSteps: [
        {
          title: '资质自查',
          desc: '对照资质清单检查现有资质文件，确定需要办理的项目',
          action: 'checklist',
          actionText: '下载自查清单'
        },
        {
          title: '材料准备',
          desc: '按照要求准备各项资质所需的证明材料，确保齐全有效',
          action: 'materials',
          actionText: '查看材料模板'
        },
        {
          title: '提交申请',
          desc: '向相关部门提交资质申请，可通过线上或线下渠道办理',
          action: 'application',
          actionText: '线上申请入口'
        },
        {
          title: '审核跟进',
          desc: '跟踪申请进度，及时补充材料或回复审核意见',
          action: 'track',
          actionText: '查询进度'
        },
        {
          title: '资质领取',
          desc: '审核通过后，领取相关资质证书并妥善保管'
        }
      ],
      
      // 常见问题
      faqs: [
        {
          question: '办理无人机经营许可证需要多长时间？',
          answer: '通常情况下，从提交完整材料到获得许可证需要20-30个工作日。具体时间可能因地区和申请材料的完整性而有所不同。建议提前准备并合理安排时间。',
          expanded: false
        },
        {
          question: '无人机驾驶员执照有哪些类型？如何选择？',
          answer: '目前主流的无人机驾驶员执照有CAAC（中国民航局）、AOPA（中国航空器拥有者及驾驶员协会）和ASFC（中国航空运动协会）颁发的证书。如果主要从事商业运营，建议考取CAAC或AOPA认证；如果以娱乐飞行为主，ASFC证书更为适合。',
          expanded: false
        },
        {
          question: '所有地区都需要申请空域许可吗？',
          answer: '不是所有地区都需要。一般来说，在城市建成区、机场净空区、军事管理区等敏感区域飞行需要申请空域许可。在偏远地区或非敏感区域飞行，可能只需遵守相关飞行规定即可。具体可查询当地空管部门的规定。',
          expanded: false
        },
        {
          question: '资质办理有费用吗？大概需要多少？',
          answer: '是的，部分资质办理需要费用。营业执照注册费用较低，一般几百元；无人机驾驶员培训和考试费用较高，大约在5000-15000元不等；经营许可证本身不收费，但可能需要支付咨询、材料准备等相关费用。总体而言，全套资质办理费用约在1-3万元。',
          expanded: false
        },
        {
          question: '如果资质不全，可以先申请加盟吗？',
          answer: '我们建议在申请加盟前先准备好必备资质。对于部分办理周期较长的资质，可在提交加盟申请的同时进行办理，但需在正式签约前完成所有必备资质的办理。我们会提供必要的指导和支持，帮助您顺利完成资质准备。',
          expanded: false
        }
      ]
    };
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 展开/收起资质详情
    toggleQualification(index) {
      this.qualifications[index].expanded = !this.qualifications[index].expanded;
    },
    
    // 展开/收起FAQ
    toggleFaq(index) {
      this.faqs[index].expanded = !this.faqs[index].expanded;
    },
    
    // 处理流程步骤中的操作
    handleAction(action) {
      switch(action) {
        case 'checklist':
          uni.showToast({
            title: '自查清单已下载',
            icon: 'success'
          });
          break;
        case 'materials':
          uni.navigateTo({
            url: '/pages/materialTemplates/materialTemplates'
          });
          break;
        case 'application':
          uni.navigateTo({
            url: '/pages/onlineApplication/onlineApplication'
          });
          break;
        case 'track':
          uni.navigateTo({
            url: '/pages/trackProgress/trackProgress'
          });
          break;
      }
    },
    
    // 咨询客服
    openConsult() {
      uni.showModal({
        title: '联系客服',
        content: '您可以通过以下方式联系客服：\n电话：400-123-4567\n工作时间：9:00-18:00',
        showCancel: false
      });
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #1E88E5 0%, #36BFFA 100%);
  padding: 60rpx 30rpx 40rpx;
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="rgba(255,255,255,0.05)"/></svg>');
  background-repeat: repeat;
  opacity: 0.5;
}

.header-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  top: 60rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.title {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  display: block;
  margin-bottom: 15rpx;
}

.subtitle {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.85);
}

/* 主要内容区 */
.main-content {
  flex: 1;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 介绍卡片 */
.intro-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.intro-text {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
}

/* 通用区块标题 */
.section-title {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 25rpx;
  padding-left: 10rpx;
}

.section-title text {
  margin-left: 15rpx;
}

/* 资质列表 */
.qualification-list {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.qualification-item {
  border-bottom: 2rpx solid #f5f5f5;
}

.qualification-item:last-child {
  border-bottom: none;
}

.qualification-header {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  cursor: pointer;
}

.qualification-icon {
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(54, 191, 250, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.qualification-title {
  flex: 1;
  display: flex;
  align-items: center;
}

.qualification-title text {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.required {
  background-color: #FF5722;
  color: #ffffff;
  font-size: 20rpx;
  padding: 3rpx 12rpx;
  border-radius: 12rpx;
  margin-left: 15rpx;
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.rotate {
  transform: rotate(90deg);
}

.qualification-content {
  padding: 0 70rpx 25rpx;
  overflow: hidden;
  transition: all 0.3s ease;
}

.content-desc {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.6;
  display: block;
  margin-bottom: 20rpx;
}

.document-list {
  margin-bottom: 20rpx;
}

.doc-title {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
  display: block;
  margin-bottom: 15rpx;
}

.doc-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  color: #666666;
}

.doc-item text {
  margin-left: 10rpx;
}

.tips-box {
  background-color: rgba(255, 152, 0, 0.1);
  border-radius: 8rpx;
  padding: 15rpx;
  display: flex;
  align-items: flex-start;
}

.tips-text {
  font-size: 24rpx;
  color: #E67E22;
  line-height: 1.6;
  margin-left: 10rpx;
}

/* 办理流程 */
.process-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.process-steps {
  display: flex;
  flex-direction: column;
}

.step-item {
  display: flex;
  position: relative;
  padding-bottom: 30rpx;
  transition: transform 0.2s ease;
}

.step-item:hover {
  transform: translateX(10rpx);
}

.step-number {
  width: 50rpx;
  height: 50rpx;
  background-color: #36BFFA;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-weight: bold;
  margin-right: 20rpx;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

.step-item:hover .step-number {
  background-color: #1E88E5;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 26rpx;
  color: #333333;
  font-weight: 600;
  display: block;
  margin-bottom: 5rpx;
}

.step-desc {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 15rpx;
  display: block;
}

.step-action {
  margin-top: 10rpx;
}

.action-btn {
  background-color: rgba(54, 191, 250, 0.1);
  color: #36BFFA;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  height: auto;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:active {
  background-color: rgba(54, 191, 250, 0.2);
  transform: scale(0.98);
}

.step-line {
  position: absolute;
  left: 25rpx;
  top: 50rpx;
  bottom: 0;
  width: 2rpx;
  background-color: #e5e5e5;
}

/* 常见问题 */
.faq-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.faq-item {
  border-bottom: 2rpx solid #f5f5f5;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  cursor: pointer;
}

.faq-question text {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
  line-height: 1.5;
}

.faq-answer {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.6;
  padding: 0 0 25rpx 0;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 咨询按钮 */
.consult-btn-container {
  padding: 0 30rpx 20rpx;
}

.consult-btn {
  width: 100%;
  height: 90rpx;
  background-color: #36BFFA;
  color: #ffffff;
  border-radius: 45rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 6rpx 16rpx rgba(54, 191, 250, 0.3);
}

.consult-btn:active {
  background-color: #1E88E5;
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(54, 191, 250, 0.2);
}

.btn-icon {
  margin-right: 15rpx;
}

/* 底部样式 */
.footer {
  padding: 30rpx;
  text-align: center;
  background-color: #ffffff;
  border-top: 2rpx solid #f5f5f5;
}

.contact-info {
  font-size: 26rpx;
  color: #36BFFA;
  display: block;
  margin-bottom: 15rpx;
}

.copyright {
  font-size: 24rpx;
  color: #999999;
}
</style>
